<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link
          ref="tag"
          tag="span"
          class="tags-view-item active"
          :to="{ path: '/' }"
        >
          能耗数据分析详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle title="当月实时数据" class="float margin" style="width: 34.3%">
          <StrokeOrnament
            title="总表"
            style="margin: 8px 0 5px 0"
          ></StrokeOrnament>
          <div class="flex_center">
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList1"
            />
          </div>
          <div class="flex_center_direction Echarts sssj_box">
            <div class="sssj_item flex_center">
              <div class="img_box">
                <img src="@/assets/images/echarts/dian.png" alt="" />
                <div class="title">电能</div>
              </div>
              <CountTo class="countTo" :number="top1[0]" transform="1" />
              <div class="unit">KW·h</div>
            </div>
            <div class="sssj_item flex_center">
              <div class="img_box">
                <img src="@/assets/images/echarts/shui3.png" alt="" />
                <div class="title">水能</div>
              </div>
              <CountTo class="countTo" :number="top1[1]" />
              <div class="unit">吨(T)</div>
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="水消耗量统计"
          class="float margin"
          style="width: 31.3%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <div class="Echarts flex_center">
            <div class="calculagraph_left flex_center">
              <Ring style="width: 65%; height: 80%" :data="top2.zjh" />
            </div>
            <div class="calculagraph_right">
              <StrokeItem title="消耗总量" :number="top2.xh" />
              <StrokeItem title="上月" :number="top2.sy" />
              <StrokeItem title="环比" :number="top2.hb" unit="%" />
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="电消耗量统计"
          class="float margin"
          style="width: 31.4%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange3"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList3"
            />
          </div>
          <div class="flex_center Echarts">
            <div class="calculagraph_left calculagraph_left2">
              <PieImg
                legendLeft="60%"
                length="5"
                itemWidth="0.8"
                cirLeft="1"
                :data="top3.list"
                :showLabel="true"
                :isLenged="false"
                :color="['#fe9800', '#ffff00']"
                :img="require('@/assets/images/echarts/zbdnfp.png')"
              />
            </div>
            <div class="calculagraph_right">
              <StrokeItem title="总量" :number="top3.xh" />
              <StrokeItem title="上月" :number="top3.sy" />
              <StrokeItem title="环比" :number="top3.hb" unit="%" />
            </div>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_center">
        <StrokeTitle title="环比数据" class="float margin" style="width: 49%">
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <div class="Echarts flex_center">
            <div class="calculagraph_left calculagraph_left3 flex_center">
              <Ring
                style="width: 45%; height: 90%"
                :data="center1.zjh"
                width="1.2"
              />
            </div>
            <div class="calculagraph_right calculagraph_right2">
              <StrokeItem title="消耗总量" :number="center1.xh" />
              <StrokeItem title="上月" :number="center1.sy" />
              <StrokeItem title="环比" :number="center1.hb" unit="%" />
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle title="能耗对比" class="float margin" style="width: 49%">
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
          </div>
          <div class="flex_center Echarts">
            <XRow
              barRight="19%"
              barLeft="10%"
              :data="center2"
              xUnit="KW·h"
            ></XRow>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_bottom">
        <StrokeTitle
          title="当月能耗数据"
          class="float margin"
          style="width: 99%"
        >
          <MoreDirectionLine
            :data="data3"
            unit="%"
            :legendData="['1111', 'w32', '422']"
            barWidth="21"
            style="height: calc(100% - 0px)"
          />
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from "@/components/chartNum/index4.vue"; //数字递增
import TwoRow from "@/components/echarts/bar/twoRow.vue";
import MoreDirectionLine from "@/components/echarts/bar/moreDirectionLine.vue"; //柱状加折线
import {
  enery1,
  enery2,
  enery3,
  enery4,
  enery5,
  enery6,
}
from "@/api/echarts/enery";
export default {
  components: {
    TwoRow,
    CountTo,
    MoreDirectionLine,
  },
  data() {
    return {
      model: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      // 当月实时数据
      top1: [],
      top1Form: {
        ggname: "全部",
      },

      //水消耗量统计
      top2: {
        zjh: { num: "353224", baifenbi: "22" },
        xh: "22222",
        sy: "334444",
        hb: "-22",
      },


      //电消耗量统计
      top3: {
        list: [
          { name: "生活用电", value: "22" },
          { name: "生产用电 ", value: "122" },
        ],
        xh: "222",
        sy: "1111",
        hb: "-22",
      },
      top3Form: {
        jsrq: this.$getMonth("e"),
        ksrq: this.$getMonth("s"),
        val: 1,
        ggname: "",
      },


      //环比数据
      center1: {
        zjh: { num: "353224", baifenbi: "22" },
        xh: "22222",
        sy: "334444",
        hb: "-22",
      },
      //能耗对比
      center2: [
        { name: "设备一", value: "321" },
        { name: "设备二", value: "123" },
        { name: "设备三", value: "124" },
        { name: "设备四", value: "243" },
        { name: "设备五", value: "218" },
      ],
      ///当月能耗数据
      bottom: {},
      data3: [
        { name: "已签收", value1: 13, value2: 33, value3: 34 },
        { name: "配送中", value1: 53, value2: 53, value3: 42 },
        { name: "已出库", value1: 78, value2: 21, value3: 43 },
        { name: "采购中", value1: 12, value2: 23, value3: 111 },
        { name: "接单中", value1: 90, value2: 12, value3: 113 },
      ],
      color: ["blue", "orange", "green", "pink"],
    };
  },
  created() {
    // this.enery1();
  },
  methods: {
    radioChange() {},
    //当月数据
    selectList1(e) {
      this.top1Form.ggname = e;
      this.enery1();
    },
    enery1() {
      enery1(this.top1Form).then((res) => {
        // console.log(11111,res)
        if (res.code == 200 && res.data.lenth != 0) {
          this.top1 = res.data
        }
      });
    },

    // 电消耗量统计
    radioChange3(e) {
      this.top3Form.ksrq = e[0];
      this.top3Form.jsrq = e[1];
      this.enery3();
    },
    //均值选择器切换
    selectList3(e) {
      this.top3Form.ggname = e;
      if (e == "全部") {
        this.top3Form.val = 1;
      } else {
        this.top3Form.val = 0;
      }
      this.enery3();
    },
    //均值统计
    enery3() {
      // enery3(this.top3Form).then((res) => {
      //   console.log(333333,res)
      //   if (res.code == 200 && res.data.lenth != 0) {
          
      //   }
      // });
    },
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_top,
    .content_bottom,
    .content_center {
      //   background: red;
      width: 100%;
      height: 31%;
    }
    // .content_top {
    //   height: 28.8%;
    // }
    // .content_bottom {
    //   height: 29.8%;
    // }
    .cntj_box {
      width: 100%;
      height: 100%;
      padding: 15px;
      .cntj_item {
        width: 24.5%;
        background: linear-gradient(
          180deg,
          rgba(44, 119, 187, 0.5) 0%,
          rgba(18, 81, 141, 0.5) 100%
        );
        border: 1px solid #2489ee71;
        height: 100%;
        padding: 15px;
        nav {
          font-size: 20px;
          background: rgba(35, 107, 173, 0.7);
          height: 32%;
          width: 100%;
          text-align: center;
        }
        .cntj_item_content {
          width: 100%;
          height: 66%;

          margin-top: 2%;
          .cntj_item_content_item {
            width: 49%;
            background-image: url("~@/assets/images/echarts/zhuangshi.png");
            background-size: 100% 100%;
            height: 100%;
            background-color: rgba(35, 107, 173, 0.7);
            .number {
              font-size: 37px;
            }
            .unit {
              font-size: 17px;
              margin-top: 3%;
              color: #ffffff;
            }
          }
        }
      }
    }
    .Echarts {
      height: calc(100% - 50px);
    }

    .sssj_box {
      height: calc(100% - 70px);
      // background: red;
      .sssj_item {
        justify-content: flex-start;
        width: 100%;
        height: 30%;
        margin-bottom: 3%;
        // justify-content: center;
        .img_box {
          width: 40%;
          margin-top: 12px;
          height: 40px;
          background: url("~@/assets/images/echarts/tabl@2x.png");
          display: flex;
          align-items: flex-end;
          background-size: 100% 100%;
          margin-left: 20%;
          img {
            width: 35px;
            margin: -100px 30px 0 30px;
            position: relative;
            top: 3px;
            // margin-left: 10px;
          }
        }
        .title {
          font-size: 15px;
          line-height: 32px;
          // margin-left: 10px;
          color: #ffffff;
        }
      }
      .countTo {
        margin: 0 10px 0 -70px;
      }
      .unit {
        font-size: 12px;
        margin-left: -5px;
        margin-top: 25px;
        color: #00ffd3;
      }
    }
    @media screen and (max-width: 1200px) {
      .sssj_item {
        transform: scale(1.1) !important;
        -webkit-transform: scale(1.1) !important; /*兼容-webkit-引擎浏览器*/
        -moz-transform: scale(1.1) !important; /*兼容-moz-引擎浏览器*/
        img {
          width: 50px !important;
          top: 10px !important;
        }
      }
    }
    .calculagraph_right,
    .calculagraph_left {
      width: 40%;
      height: 100%;
      // background: red;
      display: flex;
      align-items: center;
      flex-direction: column;
      position: relative;
      float: left;
      margin-left: -8%;
    }
    .calculagraph_right {
      align-items: flex-start;
      justify-content: center;
      width: 45%;
      height: 95%;
      margin-left: 0%;
      .calculagraph_right_item {
        width: 260px;
      }
    }
    .calculagraph_right2 {
      max-width: 240px;
    }
    .calculagraph_left2 {
      width: 50%;
      margin-left: 2%;
    }

    // .calculagraph_left3 {
    //   width: 45%;
    //    max-width: 240px;
    //   margin:0 5%;
    // }
  }
}
</style>